<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
<!--vue组件-->
		<div id="app">
			<bbb></bbb>
		</div>
			<script type="text/javascript">
				//Vue.component(tagName, options)
				//tagName组件名，optionsoptions 为配置选项
				//Vue.component('runoob',
                             //{
                   //    template: '<h1>自定义组件!</h1>'
                     //         })
			//它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。
			//如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上，
		   //	但是查看后台dom结构存在template标签。
		   
		  Vue.component('bbb', {
  data: function () {
  	
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
				vm=new Vue({
					el:'#app',
				})
				
				
			</script>
	</body>
</html>
